<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10402200") }}
    </PageTitle>
    <el-card
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      shadow="never"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline @submit.prevent.native>
        <el-form-item>
          <el-input
            v-model="searchKeyword"
            :placeholder="$t('flyparam.system_template')"
            clearable
            maxlength="32"
            @keyup.enter.native="
              () => {
                searchKeyword = searchKeyword.trim();
                search();
              }
            "
            @clear="search"
            @blur="() => (searchKeyword = searchKeyword.trim())"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="search()">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="() => (dialogVisible = true)">
            <svg-icon icon-class="plus" />
          </el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="tableData" stripe>
        <el-table-column prop="appName" :label="$t('flyparam.template_name')" />
        <el-table-column prop="description" label="description" />
        <el-table-column label="Mode">
          <template v-slot="{ row }">
            <el-tag size="small">{{ modeFilter(row.mode) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="File Type">
          <template v-slot="{ row }">
            <el-tag size="small">{{ fileFilter(row.fileType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="100px">
          <template v-slot="{ row }">
            <div :title="$t('page.edit')" class="inline-block mr-1"><el-button @click="()=>handleEdit(row)" text class="w-8"><svg-icon icon-class="Edit" /></el-button></div>
            <div :title="$t('page.delete')" class="inline-block"><el-button @click="()=>handleDelete(row.id, row.appName)" text class="w-8" style="color:var(--el-color-danger)"><svg-icon icon-class="Delete" /></el-button></div>
            <!-- <el-dropdown class="align-middle" trigger="click">
              <el-button text>
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    class="flex items-center"
                    @click="() => handleEdit(row)"
                    ><svg-icon icon-class="Edit" />{{ $t("page.edit") }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    class="flex items-center"
                    @click="() => handleDelete(row.id, row.appName)"
                    ><svg-icon icon-class="Delete" />{{
                      $t("page.delete")
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu></template
              >
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="New Template" v-model="dialogVisible" @close="handleDialogClose">
      <el-form ref="form" :model="form" label-position="top">
        <el-form-item required label="App Name" prop="appName">
          <el-input
            v-model="form.appName"
            :maxlength="128"
            @blur="() => (form.appName = form.appName.trim())"
          />
        </el-form-item>
        <el-form-item label="Description">
          <el-input
            v-model="form.description"
            prop="description"
            label="Description"
            :maxlength="255"
          />
        </el-form-item>
        <el-form-item label="File Type">
          <el-radio-group v-model="form.fileType">
            <el-radio :label="1">JSON</el-radio>
            <el-radio :label="2">ASN.1</el-radio>
            <el-radio :label="3">XML</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Mode">
          <el-radio-group v-model="form.mode">
            <el-radio :label="1">Design</el-radio>
            <el-radio :label="2">Simple</el-radio>
          </el-radio-group>
        </el-form-item> </el-form
      ><template #footer>
        <div class="text-right">
          <el-button text @click="() => (dialogVisible = false)">
            {{ $t("common.cancel") }}
          </el-button>
          <el-button type="primary" :loading="buttonLoading" @click="newTemplate">
            {{ $t("common.confirm") }}
          </el-button>
        </div></template
      >
    </el-dialog>
  </div>
</template>

<script>
import {
  getAdminParameterTemplates,
  deleteAdminParameterTemplate,
  addAdminParameterTemplate,
} from "@/api/parameter";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  components: {
    PageTitle,
  },
  data() {
    return {
      searchKeyword: "",
      loading: false,
      buttonLoading: false,
      dialogVisible: false,
      tableData: [],
      pageSize: 10,
      pageNo: 1,
      rows: 1,
      form: {
        mode: 1,
        appName: "",
        fileType: 1,
        description: "",
      },
    };
  },

  mounted() {
    this.fetchData();
  },
  methods: {
    modeFilter(val) {
      const mode = {
        1: "Design",
        2: "Simple",
      };
      return mode[val];
    },
    fileFilter(val) {
      const file = {
        1: "JSON",
        2: "ASN.1",
        3: "XML",
      };
      return file[val];
    },
    search() {
      this.pageNo = 1;
      this.fetchData();
    },
    reset() {},
    currentChangeHandle(val) {
      this.pageNo = val;
      this.fetchData();
    },
    async fetchData() {
      this.loading = true;
      let res = [];
      try {
        res = await getAdminParameterTemplates({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          appNameLike: this.searchKeyword,
        });
      } catch {
        this.loading = false;
      }

      this.tableData = res.data;
      this.rows = res.rows;
      this.loading = false;
    },
    handleDelete(templateId, appName) {
      this.$confirm(
        this.$t("flyparam.delete_template_warning", { id: appName }),
        this.$t("bar.prompt"),
        {
          confirmButtonText: this.$t("page.confirm"),
          cancelButtonText: this.$t("page.cancel"),
          type: "warning",
        }
      ).then(async () => {
        try {
          await deleteAdminParameterTemplate(templateId);
        } catch (err) {
          this.$confirmError(err);
          return;
        }
        this.$message.success(this.$t("page.delete_success"));
        this.paegNo = 1;
        this.fetchData();
      });
    },
    handleEdit(app) {
      this.$store.commit("parameter/SET_APP_NAME", app.appName);
      this.$router.push(`/fly-parameter/config/${app.id}`);
    },
    handleDialogClose() {
      this.form = {
        mode: 1,
        appName: "",
        fileType: 1,
        description: "",
      };
      this.$refs.form.clearValidate();
    },
    async newTemplate() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.buttonLoading = true;
          try {
            await addAdminParameterTemplate(this.form);
          } catch (err) {
            this.buttonLoading = false;
            this.$confirmError(err);
            return;
          }
          this.$message.success(this.$t("page.add_success"));
          this.buttonLoading = false;
          this.paegNo = 1;
          this.fetchData();
          this.dialogVisible = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table table tr.el-table__row td svg {
  margin-right: 0;
  margin-bottom: 0;
}
.button-wrapper {
  width: 24px;
  height: 24px;
  line-height: 22px;
  border-radius: 4px;
  background-color: transparent;
  color: #676879;
  transition-delay: 0s, 0s;
  transition-duration: 0.07s, 0.1s;
  transition-property: transform, background-color;
  transition-timing-function: ease, cubic-bezier(0.4, 0, 0.2, 1);
  i {
    width: 24px;
    height: 100%;
  }
  &:not(.button-wrapper--disabled) {
    &:hover {
      background-color: #dcdfec;
    }
    &:active {
      transform: scale(0.95) translate3d(0, 0, 0);
    }
  }
  &--disabled {
    cursor: not-allowed;
  }
}
</style>
